<template>
  <view style="background: linear-gradient(to bottom, #f8f8f8, #f9eff7, #f8f8f8)">
    <view class="g-bg">
      <view class="g-polygon g-polygon-1"></view>
      <view class="g-polygon g-polygon-2"></view>
      <view class="g-polygon g-polygon-3"></view>
    </view>
    <view style="position: fixed; top: 0; left: 0; z-index: 3; width: 100vw; height: 100vh">
      <view class="head-box" :style="{ marginTop: `${top + 60}px` }">
        <text class="title">欢迎登录 👏</text>
      </view>
      <!-- #ifdef MP -->
      <mp-login></mp-login>
      <!-- #endif -->
      <!-- #ifndef MP -->
      <user-login></user-login>
      <!-- #endif -->
    </view>
  </view>
</template>

<script setup lang="ts">
  import { computed } from 'vue';
  import MpLogin from './components/mp-login.vue';
  import UserLogin from './components/user-login.vue';
  import mxpGetSysInfoStore from '@/mxp-ui/mxp-tool/store/mxp-store-sys-info';
  const sys = mxpGetSysInfoStore().getSysInfo();
  const top = computed(() => sys.value.safeAreaInsets?.top || 0);
</script>

<style scoped lang="scss">
  .head-box {
    padding: 30rpx;

    .title {
      font-size: 36px;
      font-weight: bold;
    }
  }

  .g-bg {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;

    .g-polygon {
      position: absolute;
      opacity: 0.5;
    }

    &:before {
      position: absolute;
      inset: 0;
      z-index: 1;
      content: '';
      backdrop-filter: blur(40px);
    }

    .g-polygon-1 {
      top: 150px;
      left: -10%;
      width: 500rpx;
      height: 400rpx;
      clip-path: polygon(0 10%, 30% 0, 100% 40%, 70% 100%, 20% 90%);
      background: linear-gradient(#f2f2c8, #e3eeaf);
      animation: rotate-animation 8s infinite linear;
    }

    .g-polygon-2 {
      top: 150px;
      left: 38%;
      width: 600rpx;
      height: 400rpx;
      clip-path: polygon(10% 0, 100% 70%, 100% 100%, 20% 90%);
      background: linear-gradient(-36deg, #eebab1, #f7cab7);
      animation: rotate-animation 8s infinite linear;
    }

    .g-polygon-3 {
      top: 150px;
      left: 20%;
      width: 500rpx;
      height: 300rpx;
      clip-path: polygon(80% 0, 100% 70%, 100% 100%, 20% 90%);
      background: linear-gradient(0deg, #f5e2b9, #f2dbbb);
      animation: rotate-animation 9s infinite linear;
    }
  }

  @keyframes rotate-animation {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }
</style>
